<template>
  <div class="home-container">
    <van-nav-bar :title="$t('home.title')" fixed>
      <template #right>
        <van-space>
          <van-button size="small" @click="toggleLanguage">
            {{ currentLanguage === 'zh' ? 'EN' : '中' }}
          </van-button>
          <van-button size="small" @click="toggleTheme">
            {{ theme === 'light' ? '🌙' : '☀️' }}
          </van-button>
        </van-space>
      </template>
    </van-nav-bar>
    <div class="content">
      <van-swipe class="banner" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="i in 4" :key="i">
          <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-#{i}.jpeg" />
        </van-swipe-item>
      </van-swipe>
      <van-grid :column-num="4" :border="false" class="grid-section">
        <van-grid-item icon="photo-o" :text="$t('home.screenSize')" @click="goToScreenSize" />
      </van-grid>
      <van-cell-group inset class="cell-group">
        <van-cell :title="$t('home.screenSize')" center is-link @click="goToScreenSize" />
      </van-cell-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import useLanguage from '@/hooks/useLanguage'
import useTheme from '@/hooks/useTheme'

const router = useRouter()
const { currentLanguage, toggleLanguage } = useLanguage()
const { theme, toggleTheme } = useTheme()

// 跳转到屏幕尺寸页面
const goToScreenSize = () => {
  router.push('/screen-size')
}
</script>

<style lang="scss" scoped>
.home-container {
  padding-top: 46px;
  min-height: 100%;
  background-color: var(--background-color);

  .content {
    padding: $spacing-base 0;

    .banner {
      height: 160px;
      margin-bottom: $spacing-base;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .grid-section {
      margin-bottom: $spacing-base;
      background-color: var(--white);
    }

    .cell-group {
      margin-bottom: $spacing-base;
    }
  }
}
</style>